<template>
  <van-skeleton
    title
    avatar
    avatar-size="50"
    :row="5"
    :loading="loading"
  >
    <div v-if="thatShow" :miva-id="dynamicData.id" class="components-dynamic">
      <!-- block-header -->
      <div class="container-header" @click="golink(userRes)">
        <div class="container-cover">
          <van-image
            :src="userRes.avatar"
            round
            width="50"
            height="50"
            fit="cover"
          />
        </div>
      </div>
      <!-- block-body -->
      <div class="container-body">
        <!-- 基础内容容器 -->
        <div class="container-body-base">
          <div class="group-top">
            <span class="name">{{ userRes.nickname||'米米法' }}</span>
            <span class="time">{{ time }}</span>
          </div>
          <div class="group-mid">
            <!-- <div>{{ dynamicData.content }}</div> -->
            <div v-html="dynamicData.content "  class="jj"/>
            <div class="container-layer-image">
              <div v-for="(temp, index) in dynamicData.img" :key="index" class="container-image" @click="checkImage">
                <van-image
                  :src="temp.image_adr"
                  width="33vw"
                  height="34vw"
                  fit="cover"
                  
                />
              </div>
            </div>
          </div>
          <div class="group-btm" dir="rtl">
            <span class="like" @click="comment"><img src="@/assets/talk.png" class="satr-img"></span>
            <span class="satr" @click="starSubmit"><img src="@/assets/satr_un.png" class="satr-img"></span>
            <span v-if="canDel" class="like" @click="delDynamic"><van-icon name="delete" color="#EC9C9C" /></span>
          </div>
          <div v-if="commentOff" class="container-comment">
            <input ref="commentInput" v-model="commentData" autofocus class="input-comment" type="text" placeholder="填写评论...">
            <div class="comment-btn" @click="commentSubmit">提交</div>
          </div>
        </div>
        <!-- 扩展内容容器 -->
        <div class="container-body-extend">
          <div v-if="showLink" class="group-total" dir="rtl" @click="toggelComment">共 {{ commentList.length }} 条评论</div>
          <div class="group-star">
            <span v-show="starRoleList.length > 0" class="satr cont"><img src="@/assets/star.png" class="satr-img"></span>
            <span v-for="(temp, index) in starRoleList.slice(0,5)" :key="index" class="role">{{ temp }}</span>
          </div>
          <div class="group-comment">
            <div v-for="(temp, index) in computCommentList" :key="index" class="block-comment">
              <span class="name">{{ temp.nickname }}</span>
              <span class="body">{{ temp.content }}</span>
            </div>
          </div>
        
        </div>
      </div>
    </div>
  </van-skeleton>
</template>

<script>
/* eslint semi: [error, always]  */
import { getComment, createComment, getStar, createStar, delStar, delDynamic } from '@/api/dynamic';
import { getUserInfo } from '@/api/miva_user';
import { mapGetters } from 'vuex';
import { ImagePreview } from 'vant';
import { formatTime } from '@/utils';
export default {
  props: {
    canDel: {
      type: Boolean,
      default: false
    },
    showLink: {
      type: Boolean,
      default: true
    },
    dynamicData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      thatShow: true,
      loading: true,
      userRes: {},
      commentOff: false,
      commentOpen: false,
      commentList: [],
      starRoleList: [],
      commentData: '',
      isStar: 0
    };
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ]),
    time() {
      return formatTime(this.dynamicData.release_at);
    },
    computCommentList() {
      return this.commentOpen ? this.commentList : this.commentList.slice(0, 5);
    }
  },
  async created() {
    // 获取评论
    const commentRes = await getComment(this.dynamicData) || [];
    this.commentList = commentRes.data.reverse();
    // 获取用户信息
    const userRes = await getUserInfo({ id: this.dynamicData.user_id });
    this.userRes = userRes.data || {};
    this.loading = false;
  },
  methods: {
    golink(userInfo) {
      this.$router.push({ name: 'MatchInfo', params: { userInfo }});
    },
    checkImage() {
      const images = [];
      for (let i = 0; i < this.dynamicData.img.length; i++) {
        images.push(this.dynamicData.img[i].image_adr);
      }
      ImagePreview({ images });
    },
    comment() {
      this.commentOff = !this.commentOff;
      this.commentData = '';
    },
    async commentSubmit() {
      await createComment({
        dynamic_id: this.dynamicData.id,
        content: this.commentData
      });
      this.commentList.unshift({
        nickname: this.userInfo.nickname,
        content: this.commentData
      });
      this.comment();
    },
    async delDynamic() {
      const res = await delDynamic(this.dynamicData);
      if (res.code === 1) {
        this.thatShow = false;
        this.$dialog.alert({
          message: `删除成功`
        });
      }
    },
    async starSubmit() {
      const starRes = await getStar(this.dynamicData);
      let res;
      // eslint-disable-next-line
      if (starRes.code == 1) {
        res = await createStar(this.dynamicData);
      } else {
        res = await delStar(this.dynamicData);
      }
      this.starRoleList = res.data || [];
    },
    // 展开评论
    toggelComment() {
      console.log(`展开评论`);
      this.commentOpen = !this.commentOpen;
    }
  }
};
</script>

<style lang="less" scoped>
.van-icon {
  position: relative;
  top: 1px
}
.container-comment {
  display: flex;
  border: 1px solid #ddd;
  font-size: 17px;
  .input-comment {
    width: 100%;
    border: 0;
    outline: 0;
  }
  .comment-btn {
    white-space: nowrap;
    padding: 5px;
    background-color: #f45050;
    color: #fff;
    font-size: 14px;
  }
}
</style>

<style lang="less" scoped>
.components-dynamic {
  display: flex;
  margin: 0 0 20px;
  .container-layer-image {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    .container-image {
      margin: 0 2px;
    }
  }
  .container-header {
    width: calc(20vw);
    height: calc(20vw);
    padding: calc(2vw);
    box-sizing: border-box;
    .container-cover {
      width: calc(15vw);
      height: calc(15vw);
      border-radius: 50%;
      overflow: hidden;
      .cover {
        width: 100%;
        height: 100%;
      }
    }
  }
  .container-body {
    width: calc(77vw);
    .container-body-base {
      padding: calc(1.5vw) 0;
      border-bottom: 1px solid #ddd;
      .group-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .time {
          font-size: 12px;
          color: #b3b3b3;
        }
        .name{
              font-weight: bold;
               font-size:1.0625rem;
        }
      }
      .group-mid {
        padding: 5px 0;
        font-size: 14px;
      }
      .group-btm span {
        margin: 0 10px;
      }
    }
    .container-body-extend {
      font-size: 12px;
      .group-star {
        margin: 7.5px 0;
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        color: #f5aeae;
        .role {
          margin-right: 10px;
          white-space: nowrap;
        }
      }
      .group-comment {
        .block-comment {
          margin-bottom: 5px;
        }
        .name {
          color: #f5aeae;
          &::after {
            content: " : ";
          }
        }
        .body {
          word-break: break-all;
        }
      }
      .group-total {
        color: #f5aeae;
        padding-top: 7px;
      }
    }
  }
}
.satr-img{
  width: 14px;
  height: 14px;
  overflow: hidden;
}
.like, .cont{
  margin-right: 5%;
}
.jj{
  padding-bottom: 10px;
}
</style>
